import React from 'react';
import { connect } from 'dva';
import { Form, Input, Divider, Modal } from 'antd';

const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 19,
  },
};


@connect(({ testrecord, project, user, loading }) => ({
  formModalVisible: testrecord.formModalVisible,
  loading: loading.models.testrecord
}))
  export default Form.create()(
    class extends React.PureComponent {

      handleCancel = () => {
        this.props.dispatch({
          type: 'testrecord/setFormModalVisible',
          payload: false
        })
        this.props.form.resetFields();
      };

      handleOK = (e) => {
        const form = this.props.form;
        form.validateFields((err, values) => {
          if (err) {
            return;
          }
          if (!err) {
            this.props.dispatch({
              type: 'testrecord/edit',
              payload: { ...values }
            })
          }
          this.props.form.resetFields();
        });
      };

      render() {
        const { data } = this.props;
        const { getFieldDecorator } = this.props.form;
        return (
          <Modal
            visible={this.props.visible}
            title="修改提测记录"
            okText="确定"
            cancelText="取消"
            destroyOnClose={true}
            onCancel={this.handleCancel}
            onOk={this.handleOK}
            width={595}
          >
            <p>项目：{data.projectName}</p>
            <p>版本：{`${data.versionName}（第${data.versionTestCount}提测）`}</p>
            <p>提测记录 ID：{data.id} </p>
            <Form layout="horizontal" >
              <Form.Item {...formItemLayout}>
                {
                  getFieldDecorator('id', {
                    rules: [{ required: true }],
                    initialValue: data.id
                  })
                    (<Input type="hidden" />)
                }
              </Form.Item>
              <Form.Item {...formItemLayout} label="新功能">
                {getFieldDecorator('newFeatureRemark', {
                  initialValue: data.newFeatureRemark,
                  rules: [
                    { required: true, message: '请输入本次迭代版本的新功能' },
                  ],
                })(<TextArea autosize={{ minRows: 3 }} placeholder="请简要描述本次迭代版本的新功能" />)}
              </Form.Item>
              <Form.Item {...formItemLayout} label="修改点">
                {getFieldDecorator('updateRemark', {
                  initialValue: data.updateRemark,
                  rules: [
                    { required: true, message: '请输入本次迭代版本的修改点' },
                  ],
                })(<TextArea autosize={{ minRows: 3 }} placeholder="请简要描述本次迭代版本的修改点" />)}
              </Form.Item>
              <Form.Item {...formItemLayout} label="建议">
                {getFieldDecorator('adviseRemark', {
                  initialValue: data.adviseRemark,
                  rules: [
                    { required: true, message: '请输入本次迭代版本的建议' },
                  ],
                })(
                  <TextArea
                    autosize={{ minRows: 3 }}
                    placeholder="关于本次迭代版本的测试建议&备注（如：已知问题等）"
                  />
                )}
              </Form.Item>
              <Form.Item {...formItemLayout} label="提测包(地址)">
                {getFieldDecorator('testPackageUrl', {
                  initialValue: data.testPackageUrl,
                  rules: [
                    { required: true, message: '请输入本次迭代版本的获取路径' },
                  ],
                })(<TextArea autosize={{ minRows: 3 }} placeholder="客户端提测包路径/web端测试地址" />)}
              </Form.Item>
            </Form>
            <Divider style={{ margin: '40px 0 24px' }} />
          </Modal>
        );
      }
    }
  );
